<template>
  <div>
    <div id="txzdBar" :style="{ width: '100%', height: '250px' }"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
var colors = ['#F56C6C']
let echartData = {}
export default {
  name: 'txzd_Bar',
  props: ['barData'],
  data() {
    return {}
  },
  mounted() {
    echartData = this.barData
    var myChart = echarts.init(document.getElementById('txzdBar'))
    myChart.setOption({
      backgroundColor: '#fff',
      color: colors,
      barWidth: 14,
      title: { text: '异常图片类别', top: 0, left: 0, textStyle: { color: '#2F3033', fontSize: '16' } },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: '{b}: {c}'
      },
      //   legend: {
      //     // left: '0%',
      //     top: '10',
      //     x: 'right', // 可设定图例在左、右、居中
      //     icon: 'circle',
      //     textStyle: {
      //       // 图例文字的样式
      //       color: '#8C8C8C',
      //       fontSize: 12,
      //     },
      //     data: ['类别'],
      //   },
      grid: {
        left: '2%',
        right: '1%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        splitLine: {
          show: false // 去除网格线
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#BFBFBF', // 坐标线的颜色
            width: '1'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#595959' // 坐标值的颜色
          },
          rotate: 45,
          formatter: function(params) {
            var newParamsName = ''
            var paramsNameNumber = params.length // 总字数
            var provideNumber = 5 // 一行显示几个字
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
            if (paramsNameNumber > provideNumber) {
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = ''
                var start = p * provideNumber
                var end = start + provideNumber
                if (p === rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber)
                } else {
                  tempStr = params.substring(start, end) + '\n'
                }
                newParamsName += tempStr
              }
            } else {
              newParamsName = params
            }
            return newParamsName
          }
        },
        boundaryGap: [0, 0.01],
        data: echartData.xList
      },
      yAxis: {
        type: 'value',
        scale: true,
        minInterval: 1, // 自动计算坐标轴高度 保证是整数
        splitLine: {
          // show: false // 去除网格线
          lineStyle: {
            color: '#E8E8E8',
            type: 'dashed' // 设置间隔线为虚线
          }
        },
        axisTick: {
          show: false // 小横线
        },
        splitArea: {
          // show: true // 保留网格区域
        },
        axisLine: {
          show: false, // 去除纵向边框线
          lineStyle: {
            type: 'solid',
            color: '#BFBFBF', // 坐标线的颜色
            width: '1'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#595959' // 坐标值的颜色
          }
        }
      },
      series: [
        {
          name: '类别',
          type: 'bar',
          label: {
            show: false,
            position: 'right', // 位置
            color: '#298DFF',
            fontSize: 12,
            fontWeight: 'normal', // 加粗
            distance: 5, // 距离
            offset: [0, 1] // 偏移距离[横向，纵向]
          }, // 柱子上方的数值
          data: echartData.yData
        }
      ]
    })
    window.addEventListener('resize', function() {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  }
}
</script>
<style lang="scss"></style>
